<template>
  <div class="container">
    <div class="left-panel">
      <div class="title">组件名称区域</div>
      <Draggable v-model="components" group="components" class="list-group" @end="onDragEnd">
        <div
          v-for="component in components"
          :key="component.name"
          class="list-group-item"
        >
          {{ component.name }}
        </div>
      </Draggable>
    </div>
    <div class="right-panel">
      <div class="title">设计区域</div>
      <Draggable v-model="designAreaComponents" class="design-area" @end="onDragEnd">
        <div
          v-for="(component, index) in designAreaComponents"
          :key="index"
          class="design-item"
        >
          <component
            :is="component.component"
            v-model="component.value"
          ></component>
        </div>
      </Draggable>
    </div>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import {
  Input,
  Select,
  Option,
  Checkbox,
  CheckboxGroup,
  Radio,
  RadioGroup,
  Textarea
} from 'element-ui'
export default {
  name: 'HighSpeedDemodulator',
  components: {
    Draggable,
    Input,
    Select,
    Option,
    Checkbox,
    CheckboxGroup,
    Radio,
    RadioGroup,
    Textarea
  },
  data () {
    return {
      components: [
        { name: '输入框', component: 'Input' },
        {
          name: '下拉框',
          component: 'Select',
          options: ['选项1', '选项2', '选项3']
        },
        { name: '文本域', component: 'Textarea' },
        {
          name: '多选',
          component: 'CheckboxGroup',
          options: ['选项1', '选项2', '选项3']
        },
        {
          name: '复选',
          component: 'RadioGroup',
          options: ['选项1', '选项2', '选项3']
        }
      ],
      designAreaComponents: []
    }
  },
  methods: {
    onDragEnd (event) {
      console.log('event', event)
      if (event.to.className.includes('design-area')) {
        const componentName = event.item.textContent.trim()
        const component = this.components.find(c => c.name === componentName)
        if (component) {
          this.designAreaComponents.push({
            component: component.component,
            value: component.value || '',
            options: component.options || []
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  padding: 10px 15px;
  height: calc(100vh - 50px);
  // background-color: pink;
  display: flex;
  position: relative;

  .title{
    height: 50px;
    line-height: 50px;
    font-weight: 700;
    font-size: 20px;
  }
}

.left-panel {
  width: 300px;
  padding: 20px;
}

.right-panel {
  flex: 1;
  padding: 20px;
}

.list-group {
  display: flex;
  flex-direction: column;
}

.list-group-item {
  padding: 10px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  cursor: move;
}

.design-area {
  min-height: 500px;
  border: 1px dashed #ddd;
  padding: 10px;
}

.design-item {
  padding: 10px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}
</style>
